<template>
  <div>
    <TopNav/>
    <HomeListData :allMusic="allMusic"/>
    <MainCarousel :bannerImg="swiperImg"/>
    <HomeTab :allMusic="allMusic"/>
  </div>
</template>

<script>
    import TopNav from "../../components/Nav/TopNav";
    import HomeListData from "./HomeListData";
    import MainCarousel from "../../components/Carousel/MainCarousel/index"
    import HomeTab from "./HomeTab";
    import axios from "axios"

    export default {
      name: "home-index",
      components: {HomeTab, HomeListData, TopNav, MainCarousel},
      data() {
        return {
          swiperImg: [
            require("../../assets/carouselimg/b1.jpg"),
            require("../../assets/carouselimg/b2.jpg"),
            require("../../assets/carouselimg/b3.jpg")
          ],
          allMusic: []
        }
      },
      methods: {
        //加载今日推荐
        loadRecommendToday() {
          return this.$api.home.getSongPageList({
            current: 1,
            size: 6
          })
          // .then(res => {
          //   this.allMusic.push({
          //     key: 'recommendMusic',
          //     name: '今日推荐',
          //     data: res.data.data.records
          //   });
          // });
        },
        //加载热门歌曲
        loadHotMusic() {
          return this.$api.home.getSongPageList({
            current: 2,
            size: 6
          })
          // .then(res => {
          //   this.allMusic.push({
          //     key: 'hotMusic',
          //     name: '热门推荐',
          //     data: res.data.data.records
          //   });
          // });
        },
        loadRockMusic() {
          return this.$api.home.getSongPageList({
            current: 7,
            size: 3
          })
          // .then(res => {
          //   this.allMusic.push({
          //     key: 'rockMusic',
          //     name: '摇滚歌曲',
          //     data: res.data.data.records
          //   });
          // });
        },
        loadOldMusic() {
          return this.$api.home.getSongPageList({
            current: 3,
            size: 6
          })
          // .then(res => {
          //   this.allMusic.push({
          //     key: 'oldMusic',
          //     name: '经典歌曲',
          //     data: res.data.data.records
          //   });
          // });
        }
      },
      mounted() {
        //加载数据
        // this.loadRecommendToday()
        // this.loadHotMusic()
        // this.loadRockMusic()
        // this.loadOldMusic()
        //加载数据
        let _this = this;
        axios.all([this.loadRecommendToday(), this.loadHotMusic(), this.loadRockMusic(), this.loadOldMusic()])
        .then(axios.spread(function(recommendMusic, hotMusic, rockMusic, oldMusic){
          _this.allMusic.push({
            key: 'recommendMusic',
            name: '今日推荐',
            data: recommendMusic.data.data.records
          })
          _this.allMusic.push({
            key: 'hotMusic',
            name: '热门推荐',
            data: hotMusic.data.data.records
          })
          _this.allMusic.push({
            key: 'rockMusic',
            name: '摇滚歌曲',
            data: rockMusic.data.data.records
          })
          _this.allMusic.push({
            key: 'oldMusic',
            name: '经典歌曲',
            data: oldMusic.data.data.records
          })
        }))
      }
    }
</script>

<style scoped>

</style>
